<!DOCTYPE HTML>
<html>
<head>
    <title> 搜索表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="../static_pc/assets3/css/bs3/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../static_pc/assets3/css/bs3/bui-min.css" rel="stylesheet" type="text/css"/>
    <!-- <link href="../static_pc/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../static_pc/assets/css/bui-min.css" rel="stylesheet" type="text/css" /> -->
    <link href="../static_pc/assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <form id="searchForm" class="form-horizontal span24">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">标题</label>

                    <div class="controls">
                        <input type="text" class="control-text" name="key" placeholder="标题">
                    </div>
                </div>
                <div class="span3 offset">
                    <button type="button" id="btnSearch" class="button button-primary">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>


</div>

<script type="text/javascript" src="../static_pc/common/jquery.min-2.1.3.js"></script>
<script type="text/javascript" src="../static_pc/layer/layer.js"></script>
<script type="text/javascript" src="../static_pc/common/JsUtil.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/bui.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/config.js"></script>
<script type="text/javascript">
    BUI.use(['common/search', 'bui/overlay', 'common/page', 'bui/mask'], function (Search, Grid, Data, Overlay, Mask) {
        var Grid = BUI.Grid, Overlay = BUI.Overlay, enumObj = {"1": "销售中", "2": "已下架"},
                columns = [
                    {title: '标题', dataIndex: 'title', elCls: 'center'},
                    {
                        title: '文章类别', dataIndex: '', elCls: 'center', renderer: function (value, obj) {
                        var type = obj.articleType.typeName;
                        return type;
                    }
                    },
                    {
                        title: '发布时间', dataIndex: '', elCls: 'center', renderer: function (value, obj) {
                        var time = (new Date(obj.gmtCreate)).format("yyyy-MM-dd HH:mm:ss");
                        return time;
                    }
                    },
                    {
                        title: '操作', dataIndex: '', elCls: 'center', renderer: function (value, obj) {
                        var delStr = '<span class="grid-command btn-del" title="删除">删除</span>';
                        return delStr;
                    }
                    }
                ],
                store = Search.createStore('../articleAdmin/listArticle', {
                    proxy: {
                        save: { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                            /* addUrl : '../data/add.json',*/
                            /* updateUrl : ' ', */
                            /* removeUrl : '../data/del.php' */
                        },
                        method: 'POST'
                    },
                    pageIndex: 0,
                    pageSize: 10,
                    autoSync: true //保存数据后，自动更新
                });

        var gridCfg = Search.createGridCfg(columns, {
            forceFit: true,
            emptyDataTpl: '<div class="centered"><img alt="Crying" src="http://img03.taobaocdn.com/tps/i3/T1amCdXhXqXXXXXXXX-60-67.png"><h2>查询的数据不存在</h2></div>',
            tbar: {
                items: [
                    {
                        text: '<i class="icon-plus"></i>发布',
                        btnCls: 'button button-small page-action grid-command btnAdd',
                        handler: addFunction
                    },
                    {text: '<i class="icon-edit"></i>修改', btnCls: 'button button-small btnUpd', handler: updFunction},
                    {text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction},
                ]
            },
            plugins: [BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.AutoFit, Grid.Plugins.ColumnResize] // 插件形式引入多选表格
        });

        var search = new Search({
                    store: store,
                    gridCfg: gridCfg
                }),
                grid = search.get('grid');

        function addFunction() {
            $(".btnAdd").attr("title", "写文章");
            $(".btnAdd").attr("data-href", "../adm/writeArticle.html");
        }

        function updFunction() {
            $(".btnUpd").removeClass("page-action");
            $(".btnUpd").removeClass("grid-command");
            $(".btnUpd").removeAttr("data-href");
            var selections = grid.getSelection();
            var ids = [];
            BUI.each(selections, function (selections) {
                ids.push(selections.id);
            });

            if (ids.length > 1) {
                BUI.Message.Alert('只能选择一条记录', 'warning');
                return false;
            } else if (ids.length <= 0) {
                BUI.Message.Alert('请选择要编辑的记录', 'warning');
                return false;
            } else {
                $(".btnUpd").addClass("page-action grid-command");
                $(".btnUpd").attr("title", "修改文章");
                var selections = grid.getSelection();
                //alert(JSON.stringify(selections[0].mid));
                $(".btnUpd").attr("data-href", "../adm/modifiyArticle.html?itemID=" + selections[0].id);
            }

        }

        //删除操作
        function delFunction() {
            var selections = grid.getSelection();
            //alert(JSON.stringify(selections));
            delItems(selections);
        }

        function delItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.id);
            });
            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    layer.load();
                    $.ajax({
                        url: "../articleAdmin/removeArticle",
                        data: {"ids": ids.toString()},
                        dataType: "json",
                        type: "post",
                        async: true,
                        success: function (data) {
                            if (!data.hasError) {
                                store.load();
                            } else {
                                BUI.Message.Alert(data.error, 'warning');
                            }
                            layer.closeAll('loading');
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.closeAll('loading');
                            BUI.Message.Alert("系统繁忙，请稍后" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus, 'warning');
                        }
                    });
                }, 'question');
            } else {
                BUI.Message.Alert("请选择记录", 'warning');
            }
        }

        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-del')) {
                var record = ev.record;
                delItems([record]);
            }
        });

    });
</script>

</body>
</html>  